<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .tou {
            height: 60px;
            background-color: #2980b9;
            display: flex;
            justify-content: space-between;
            line-height: 60px;
            color: white;
            font-size: 18px;
        }

        .tou div {
            padding: 0 20px;
        }

        .tou .icon-yonghu {
            margin-right: 10px;
        }

        .wei {
            height: 100%;
            display: flex;
            justify-content: space-around;
        }

        .wei .left {
            width: 150px;
            height: 100%;
            background-color: #2980b9;
            text-align: center;
            color: white;
            font-size: 18px;
        }

        .wei .left div {
            height: 60px;
            line-height: 60px;
            cursor: pointer;
        }

        .wei .left div.active {
            background-color: #1f618d;
        }

        .wei .left .iconfont {
            margin-right: 10px;
        }

        .wei .right {
            flex: 1;
            padding: 20px;
        }

        .wei .right .susou input {
            width: 300px;
            height: 30px;
            border: 1px solid rgb(204, 203, 203);
            border-radius: 15px;
            padding: 0 10px;
            outline: none;
        }

        .wei .right .susou button {
            width: 80px;
            height: 30px;
            background-color: #5db85b;
            border: 0;
            border-radius: 5px;
            color: white;
            line-height: 30px;
            text-align: center;
            margin-left: 40px;
            font-size: 16px;
        }

        .wei .right .tianjia {
            width: 100px;
            height: 30px;
            background-color: #5db85b;
            border: 0;
            border-radius: 5px;
            color: white;
            line-height: 30px;
            text-align: center;
            margin: 10px 0;
        }

        .wei .right table thead tr {
            font-weight: bold;
        }

        .wei .right table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
        }

        .wei .right table td {
            height: 40px;
            border-bottom: 1px solid rgb(199, 198, 198);
        }

        .wei .right table tbody tr:last-child td {
            border-bottom: 0;
        }

        .wei .right table thead tr td:first-child,
        .wei .right table tbody tr td:first-child {
            text-align: left;
        }

        .icon-bianji,
        .icon-shanchu {
            margin: 0 10px;
        }

        .ye {
            margin-top: 10px;
            margin-left: 800px;
        }

        .ye .s1 {
            display: inline-block;
            width: 80px;
            height: 30px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .zhuangtai .zhuangtai2 {
            background-color: red;
            display: inline-block;
            width: 60px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }

        .zhuangtai .zhuangtai1 {
            background-color: #5db85b;
            display: inline-block;
            width: 60px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
        a{
            color: white;
            text-decoration: none;
        }
        .box{
            height: 100%;
        }
    </style>
</head>

<body>
  <div class="box">
    <div class="tou">
        <div><span>9466云专题</span></div>
        <div><span class="iconfont icon-yonghu"></span> <span>龙猫（9466云专题）</span></div>
    </div>
    <div class="wei">
        <div class="left">
            <div><span class="iconfont icon-home"></span>首 页</div>
            <div><a href="#/zt"><span class="iconfont icon-zhuantiguanli"></span>专 题</a></div>
            <div class="active"><a href="#/yh"><span class="iconfont icon-yonhu"></span>用 户</a></div>
            <div><span class="iconfont icon-shezhi"></span>设 置</div>
            <div><span class="iconfont icon-xitongrizhi"></span>日 志</div>
        </div>
        <div class="right">
            <div class="susou">
                <input type="text" placeholder="搜索用户"><button>搜索</button>
            </div>
            <div class="tianjia"><span class="iconfont icon-tianjia"></span> 添加用户</div>
            <table>
                <thead>
                    <tr>
                        <td>邮 箱（账 户）</td>
                        <td>姓 名</td>
                        <td>电 话</td>
                        <td>所 属 组</td>
                        <td>管 理 员</td>
                        <td>状 态</td>
                        <td>操 作</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="ye">
                <span class="s1 shang">上一页</span>
                <span class="s1 xia">下一页</span>
                <span class="yeshu">1/4</span>
            </div>
        </div>
       
    </div>
  </div>
  
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="mock.js"></script>
<script>
    //    window.onhashchange = function(){
    //         switch( location.hash ){
    //             case '#/zt': home_page(); break;
    //             case '#/yh': xuanran1(duix.list); break;
    //         }
    //     }

    // xuanran(data.list)
    // function xuanran(data) {
    //     var str = data.map((item) => {
    //         return `
    //         <tr>
    //                     <td>${item.email}</td>
    //                     <td>${item.name}</td>
    //                     <td>${item.phone}</td>
    //                     <td>${item.zu}</td>
    //                     <td>${item.guan == true ? "是" : "否"}</td>
    //                     <td><div class="zhuangtai">${item.zhuang == true ? "<span class='zhuangtai1'>正常</span>" : "<span class='zhuangtai2'>异常</span>"}</div></td>
    //                     <td><span class="iconfont icon-bianji"></span><span class="iconfont icon-shanchu"></span></td>
    //                 </tr>`
    //     }).join('')
    //     document.querySelector('table tbody').innerHTML = str
    // }
    var div = document.querySelectorAll('.wei .left div')
    for (let i = 0; i < div.length; i++) {
        div[i].onclick = function () {
            for (let j = 0; j < div.length; j++) {
                div[j].classList.remove('active')
            }
            div[i].classList.add('active')
        }
    }
    var current = 1
    var pagesize = 10
    var total = Math.ceil(duix.list.length / pagesize)
    function xuanran1(data) {
        var startIndex = (current - 1) * pagesize
        var endIndex = current * pagesize
        var datas = data.slice(startIndex, endIndex)
        var str = ``
        for (var i = 0; i < datas.length; i++) {
            str += `
            <tr>
                <td>${datas[i].email}</td>
                <td>${datas[i].name}</td>
                <td>${datas[i].phone}</td>
                <td>${datas[i].zu}</td>
                <td>${datas[i].guan == true ? "是" : "否"}</td>
                <td><div class="zhuangtai">${datas[i].zhuang == true ? "<span class='zhuangtai1'>正常</span>" : "<span class='zhuangtai2'>异常</span>"}</div></td>
                <td><span class="iconfont icon-bianji"></span><span class="iconfont icon-shanchu"></span></td>
            </tr>`
        }
        document.querySelector('table tbody').innerHTML = str
        document.querySelector('.ye .yeshu').innerHTML = `${current}/${total}`
    }
    xuanran1(duix.list)
    document.querySelector('.ye .xia').onclick = function () {
        if (current < total) {
            current++
            xuanran1(duix.list)
        }
    }
    document.querySelector('.ye .shang').onclick = function () {
        if (current > 1) {
            current--
            xuanran1(duix.list)
        }
    }
    var bo = document.querySelector('table tbody')
    bo.onclick = function (e) {
        if (e.target.className == "iconfont icon-shanchu") {
            var ic = document.querySelectorAll('.icon-shanchu')
            console.log(ic);
        }
    }
</script>